<template>
  <div class="parkPictureWrap" ref="parkPictureWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" >
                  <el-select style="width: 100%;" v-model="searchInfo.parentId" :disabled="$store.state.userInfo.regionId?true:false" @change="changeDistrict(searchInfo.parentId)" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <!--<el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="selectGovAreaMap" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>-->
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">备案日期:</span>
                <span class="searchInputFont">
                     <el-date-picker
                       style="width: 100%;"
                       v-model="value6"
                       type="daterange"
                       align="left"
                       @change="selectGovAreaMap()"
                       placeholder="选择日期范围"
                       size="mini"
                       :picker-options="$store.state.pickerOptions2">
                      </el-date-picker>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
        <mapBicycletest
          :parentId="searchInfo.parentId"
          :mapInfolist="mapInfolist"
          :streetData="streetData"
          :searchInfo="searchInfo"
          :companyInfos="companyInfos"
          ref="mapFun"
          @changeCompany="changeCompany"
        ></mapBicycletest>


      </div>
    </div>
  </div>
</template>

<script>
  import mapBicycletest from "./mapRack.vue"

  export default {
    props: [],
    data(){
      return {
        searchInfo: {
          "enterpriseNo":"",
          "parentId":this.$store.state.userInfo.regionId,
          "beginTime":"",
          "endTime":""
        },
        streetData: [],
        railInfo: [],
        siteInfo: [],
        value6: [],
        times:[0,0,0,0],
        mapInfolist:[],
        companyInfos:[{enterpriseNo:null,enterpriseName:"全部",count:0}],
      }
    },
    components: {
      mapBicycletest
    },
    created(){
      this.searchInfo.statisTime=this.dtime().format('YYYY-MM-DD 00')
//      获取首次数据
      if(this.$store.state.userInfo.regionId){
        this.$nextTick(()=>{
          this.changeDistrict(this.searchInfo.parentId)
        })
      }else {
        this.selectGovAreaMap()
      }
    },
    destroyed(){


    },
    methods: {
      //改变行政区 获取街道
      changeDistrict(parentId){
        this.searchInfo.enterpriseNo=null
        this.$refs.mapFun.enterpriseNo=null
        if(!parentId){
          this.streetData=[]
          this.selectGovAreaMap()
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
              this.selectGovAreaMap()
            }
          })
      },

      selectGovAreaMap(key){
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }
        this.mapInfolist=[]
        this.searchInfo.putDistrict=this.searchInfo.parentId
        this.axios.post(process.env.API_HOST + `/put/selectPutHistoryRegion`,this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200&&result.result) {
             this.mapInfolist=result.result?result.result:[]
              if(result.result.length>0&&!key){
                this.companyInfos=[{enterpriseNo:null,enterpriseName:"全部",count:0}]
                this.getEnterHis()
              }
            }

            if(this.searchInfo.parentId){//有行政区
              /*this.streetData.forEach(item1=>{
                this.mapInfolist.forEach(item=>{
                  if(item.regionId==item1.id){
                    item.lng=item1.lng
                    item.lat=item1.lat
                    item.regionName=item1.regionName
                  }
                })
              })*/
              this.$store.state.districtData.forEach(item1=>{
                if(this.searchInfo.parentId==item1.id){
                  setTimeout(()=>{
                    this.$refs.mapFun.showAreaPoints(JSON.parse(item1.regionPoints))
                  },200)

                }
              })

            }else { //无行政区
              /*this.$store.state.districtData.forEach(item1=>{
                this.mapInfolist.forEach(item=>{
                  if(item.regionId==item1.id){
                    item.lng=item1.lng
                    item.lat=item1.lat
                    item.regionName=item1.regionName
                  }
                })
              })*/
              setTimeout(()=>{
                this.$refs.mapFun.showAreaPoints()
              },200)
            }
          })
      },
      getEnterHis(){

        this.axios.post(process.env.API_HOST + '/put/selectPutHistoryCount', {
          "putDistrict":this.searchInfo.putDistrict,
          "beginTime":this.searchInfo.beginTime,
          "endTime":this.searchInfo.endTime})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
                result.result.enterpriseList.forEach(item=>{
                  this.companyInfos.push({enterpriseNo:item.enterpriseNo,enterpriseName:item.enterpriseName,count:item.count})
                })
              this.companyInfos[0].count=result.result.total
            }
          })
      },
      changeCompany(enterpriseNo){
        this.searchInfo.enterpriseNo=enterpriseNo
        this.selectGovAreaMap(true)
      },
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .parkPictureWrap
    page()
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
</style>
